<template>
  <div class="sys">
    <div class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item class="yellows">用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="big">
      <div class="oneinput">
        <label>姓名/账号</label>
        <el-input class="name" placeholder="请输入姓名或账号" v-model="name" clearable></el-input>
      </div>
      <div class="oneinput">
        <label>推荐码</label>
        <el-input class="name" placeholder="请输入推荐码" v-model="name" clearable></el-input>
      </div>
      <div class="oneinput">
        <label>用户类型</label>
        <el-select class="chooseindex" v-model="choosemodel" slot="prepend" placeholder="请选择">
          <el-option label="全部" value="1"></el-option>
          <el-option label="理财师" value="2"></el-option>
          <el-option label="用户" value="3"></el-option>
        </el-select>
      </div>
      <div class="oneinput">
        <label>在职状态</label>
        <el-select class="chooseindex" v-model="choosemodel" slot="prepend" placeholder="请选择">
          <el-option label="全部" value="1"></el-option>
          <el-option label="在职" value="2"></el-option>
          <el-option label="离职" value="3"></el-option>
        </el-select>
      </div>
      <div class="oneinput">
        <label>是否绑卡</label>
        <el-select class="chooseindex" v-model="bangcard" slot="prepend" placeholder="请选择">
          <el-option label="全部" value="1"></el-option>
          <el-option label="未绑卡" value="2"></el-option>
          <el-option label="已绑卡" value="3"></el-option>
        </el-select>
      </div>
      <div class="oneinput">
        <label>注册时间</label>
        <el-date-picker class="chooseindex" v-model="starTime" type="date" placeholder="选择日期"></el-date-picker> -
        <el-date-picker class="timers" v-model="endTime" type="date" placeholder="选择日期"></el-date-picker>
      </div>
      <div class="oneinput">
        <div>
          <el-button class="btn" type="primary" icon="el-icon-search">搜索</el-button>
          <el-button class="btn" @click="daochu" type="success" round>导出表格数据</el-button>
          <el-button class="btn" @click="ceshi" type="success" round>测试map</el-button>
        </div>
      </div>
    </div>

    <!-- 信息表单 -->
    <div class="my_table">
      <el-table :data="tableData" style="width: 100%;" max-height="380px">
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账号" width="120">
          <template slot-scope="scope">
            <p>{{ scope.row.zhanghao }}</p>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="100">
          <template slot-scope="scope">
            <p>{{ scope.row.name }}</p>
          </template>
        </el-table-column>
        <el-table-column label="所属渠道" width="140px">
          <template slot-scope="scope">
            <p>{{ scope.row.section }}</p>
          </template>
        </el-table-column>
        <el-table-column label="部门">
          <template slot-scope="scope">
            <p>{{ scope.row.bumen }}</p>
          </template>
        </el-table-column>
        <el-table-column label="职务" width="75px">
          <template slot-scope="scope">
            <p>{{ scope.row.duty }}</p>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" width="110px">
          <template slot-scope="scope">
            <p>{{ scope.row.regionTimer }}</p>
          </template>
        </el-table-column>
        <el-table-column label="是否是IFA" width="60px">
          <template slot-scope="scope">
            <p>{{ scope.row.IF }}</p>
          </template>
        </el-table-column>
        <el-table-column label="居间协议状态" width="80px">
          <template slot-scope="scope">
            <p>{{ scope.row.xieyi }}</p>
          </template>
        </el-table-column>
        <el-table-column label="合格投资者" width="65px">
          <template slot-scope="scope">
            <p>{{scope.row.hege}}</p>
          </template>
        </el-table-column>
        <el-table-column label="离职状态" width="65px">
          <template slot-scope="scope">
            <p>{{scope.row.oper}}</p>
          </template>
        </el-table-column>
        <el-table-column label="测评结果" width="100px">
          <template slot-scope="scope">
            <p>{{scope.row.result}}</p>
          </template>
        </el-table-column>
        <el-table-column label="测评日期" width="100px">
          <template slot-scope="scope">
            <p>{{scope.row.resultdata }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-for="item in (scope.row.opArr)"
              :key="item.id"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >{{item}}</el-button>
            <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      choosemodel: "全部",
      bangcard: "全部",
      starTime: "",
      endTime: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "诸葛他方",
          id: 1,
          zhanghao: "15112308326",
          section: "科技金融一部两部",
          bumen:
            "华康财富-财富中心-综合分公司-综合一部督导区-战狼营业部-理财师",
          duty: "理财师",
          regionTimer: "2016-02-29 13:52:06",
          IF: "是",
          xieyi: "未签署",
          hege: "否",
          oper: "在职",
          result: "平衡性(已经过去了)",
          resultdata: "2017-07-13",
          opArr: [
            "查看",
            "修改",
            "初始化密码",
            "修改推荐码",
            "赠送加息券",
            "投资测评",
            "ifa协议",
            "居间协议",
            "销户"
          ]
        },
        {
          date: "2016-05-02",
          name: "小小塔米",
          id: 2,
          zhanghao: "15112308326",
          section: "科技金融一部两部",
          bumen:
            "华康财富-财富中心-综合分公司-综合一部督导区-战狼营业部-理财师",
          duty: "理财师",
          regionTimer: "2016-02-29 13:52:06",
          IF: "是",
          xieyi: "未签署",
          hege: "否",
          oper: "在职",
          result: "平衡性(已经过去了)",
          resultdata: "2017-07-13",
          opArr: [
            "查看",
            "修改",
            "初始化密码",
            "修改推荐码",
            "赠送加息券",
            "投资测评",
            "ifa协议",
            "居间协议",
            "销户"
          ]
        },
        {
          date: "2016-05-02",
          name: "柳一一",
          id: 3,
          zhanghao: "15112308326",
          section: "科技金融一部两部",
          bumen:
            "华康财富-财富中心-综合分公司-综合一部督导区-战狼营业部-理财师",
          duty: "理财师",
          regionTimer: "2016-02-29 13:52:06",
          IF: "是",
          xieyi: "未签署",
          hege: "否",
          oper: "在职",
          result: "平衡性(已经过去了)",
          resultdata: "2017-07-13",
          opArr: [
            "查看",
            "修改",
            "初始化密码",
            "修改推荐码",
            "赠送加息券",
            "投资测评",
            "ifa协议",
            "居间协议",
            "销户"
          ]
        },
        {
          date: "2016-05-02",
          name: "康师傅泡面",
          id: 4,
          zhanghao: "15112308326",
          section: "科技金融一部两部",
          bumen:
            "华康财富-财富中心-综合分公司-综合一部督导区-战狼营业部-理财师",
          duty: "理财师",
          regionTimer: "2016-02-29 13:52:06",
          IF: "是",
          xieyi: "未签署",
          hege: "否",
          oper: "在职",
          result: "平衡性(已经过去了)",
          resultdata: "2017-07-13",
          opArr: [
            "查看",
            "修改",
            "初始化密码",
            "修改推荐码",
            "赠送加息券",
            "投资测评",
            "ifa协议",
            "居间协议",
            "销户"
          ]
        }
      ]
    };
  },
  methods: {
    daochu() {
      alert("111");
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("../../packTable/Export2Excel.js");
        const tHeader = [
          "序号",
          "账号",
          "姓名",
          "所属渠道",
          "部门",
          "职务",
          "注册时间",
          "是否是IFA",
          "居间协议状态",
          "合格投资者协议",
          "离职状态",
          "测评结果",
          "测评日期"
        ];
        const filterVal = [
          "id",
          "zhanghao",
          "name",
          "section",
          "bumen",
          "section",
          "regionTimer",
          "IF",
          "xieyi",
          "hege",
          "oper",
          "result",
          "date"
        ];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        alert("结果回来的data"+data)
        export_json_to_excel(tHeader, data, "华康导出数据表");
      });
    },
    formatJson(filterVal, jsonData) {
      
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    ceshi(){
      this.tableData.map(v => {
        console.log(v)
      })
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  color: orange;
}
.sys {
  width: 100%;
  height: 100%;
}

.big {
  margin-top: 15px;
  font-size: 12px;
  color: gray;
  padding-top: 25px;
  margin-right: 0px;
  background-color: white;
  display: inline-block;
}

.name {
  width: 190px;
  height: 30px;
}
label {
  display: inline-block;
  width: 55px;
  padding-right: 15px;
  text-align: right;
  padding-left: 65px;
}
.oneinput {
  height: 50px;
  float: left;
}
.chooseindex {
  width: 190px;
}
.timers {
  display: inline-block;
  width: 120px;
  padding-right: none;
}
.el-date-editor.el-input {
  width: 140px;
}
.btn {
  display: inline-block;
  background-color: #f7931e;
  border: none;
  margin-left: 40px;
}
.my_table {
}
.el-button {
  margin-bottom: 5px;
}
</style>